import React from 'react'
import ReactDOM from 'react-dom'
import Alert from './Alert'
import ColorPicker from './ColorPicker'
import Dialog from './Dialog'
class App extends React.Component {
  state = {
    showDialog: false
  }

  handleClose = () => {
    this.setState({showDialog: false})
  }

  render() {
    const {showDialog} = this.state
    return (
      <div>
        <Alert type="danger">用户名已被占用</Alert>
        <button
          onClick={() => this.setState({showDialog: true})}>显示dialog</button>
        <Dialog
          show={showDialog}
          onClose={this.handleClose}
          footer={<button onClick={this.handleClose}>OK</button>}
        >
          <p>我是对话框的内容</p>
        </Dialog>

        <ColorPicker />
      </div>
    )
  }
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)
